<template>
  <div class="p-4">
    <template v-for="src in imgList" :key="src">
      <img :src="src" v-show="false" alt="" />
    </template>
    <DetailModal :info="rowInfo" @register="registerModal" />
    <BasicTable @register="register" class="error-handle-table">
      <template #toolbar>
        <a-button @click="fireVueError" type="primary">
          {{ t('sys.errorLog.fireVueError') }}
        </a-button>
        <a-button @click="fireResourceError" type="primary">
          {{ t('sys.errorLog.fireResourceError') }}
        </a-button>
        <a-button @click="fireAjaxError" type="primary">
          {{ t('sys.errorLog.fireAjaxError') }}
        </a-button>
      </template>
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <TableAction
            :actions="[
              {
                label: t('sys.errorLog.tableActionDesc'),
                onClick: handleDetail.bind(null, record)
              }
            ]"
          />
        </template>
      </template>
    </BasicTable>
  </div>
</template>

<script lang="ts" setup>
import type { ErrorLogInfo } from '@/types/store'
import { watch, ref, nextTick } from 'vue'
import DetailModal from './DetailModal.vue'
import { BasicTable, useTable, TableAction } from '@/components/Table'
import { useModal } from '@/components/Modal'
import { useMessage } from '@/hooks/web/useMessage'
import { useI18n } from '@/hooks/web/useI18n'
import { useErrorLogStore } from '@/store/modules/errorLog'
import { fireErrorApi } from '@/api/demo/error'
import { getColumns } from './data'
import { cloneDeep } from 'lodash-es'

const rowInfo = ref<ErrorLogInfo>()
const imgList = ref<string[]>([])

const { t } = useI18n()
const errorLogStore = useErrorLogStore()
const [register, { setTableData }] = useTable({
  title: t('sys.errorLog.tableTitle'),
  columns: getColumns(),
  actionColumn: {
    width: 80,
    title: 'Action',
    dataIndex: 'action'
    // slots: { customRender: 'action' },
  }
})
const [registerModal, { openModal }] = useModal()

watch(
  () => errorLogStore.getErrorLogInfoList,
  (list) => {
    nextTick(() => {
      setTableData(cloneDeep(list))
    })
  },
  {
    immediate: true
  }
)
const { createMessage } = useMessage()
if (import.meta.env.DEV) {
  createMessage.info(t('sys.errorLog.enableMessage'))
}
// 查看详情
function handleDetail(row: ErrorLogInfo) {
  rowInfo.value = row
  openModal(true)
}

function fireVueError() {
  throw new Error('fire vue error!')
}

function fireResourceError() {
  imgList.value.push(`${new Date().getTime()}.png`)
}

async function fireAjaxError() {
  await fireErrorApi()
}
</script>
